<head>  
<script src="js/jquery-1.11.1.min.js"></script>  
<script>  
    $(function() {  
  
        // 浏览器上的websocket对象,用来和服务端通信.  
        var socket = null;  
  
        $("#login").click(  
                function() {  
                    var userName = $("#userName").val();  
                    if ($.trim(userName) == "") {  
                        return;  
                    }  
  
                    // 创建websocket对象  
                    socket = new WebSocket(  
					'ws://localhost:8080/MyFirstGitProject/test.do?userName=' 
                                    + userName);  
                    registerEvent();  
                });  
  
        $("#logout").click(function() {  
            socket.close();  
        });  
  
        $("#send").click(function() {  
            socket.send($("#message").val());  
        });  
  
        function registerEvent() {  
            socket.onopen = function(event) {  
                $("#messagePanel").append(  
                        "<div>websocket open successfully.</div>");  
            }  
  
            socket.onmessage = function(event) {  
                $("#messagePanel").append("<div>msg=" + event.data + "</div>");  
            };  
  
            socket.onclose = function(event) {  
                $("#messagePanel").append(  
                        "<div>websocket close successfully.</div>");  
            };  
        }  
  
    });  
</script>  
<style>  
.card {  
    margin: 20px;  
}  
</style>  
</head>  
<body>  
    <div class="card">  
        userName:<input id="userName" value="" placeholder="input your name" />  
        <button id="login">login</button>  
        <button id="logout">logout</button>  
    </div>  
    <div class="card">  
        message:<input id="message" value="" placeholder="input your message" />  
        <button id="send">send</button>  
    </div>  
  
    <div class="card" id="messagePanel"></div>  
</body>  